<template>

 <div>
   <el-row class="header-container">
     <el-col :span="24">
       <el-row class="logo-container">
         <el-col :span="20" :offset="2">
           <!-- 标题栏 -->
           <div class="lf title-text logo-text logo">LOGO</div>
           <div class="lf title-text logo-text logo">|</div>
           <div class="lf title-text logo-text">云站务管理系统多企业版</div>
           <div class="lf title-text logo-time date">2018年7月25日</div>
           <div class="lf title-text logo-time">15:26:15</div>
           <!-- 用户栏 -->
           <ul class="rf user-container">
             <li @click="showAddr"><img src="" alt=""><span
               class="user-text">{{addr}}</span></li>
             <li class="user-text">|</li>
             <li class="user-text" @click="">张三</li>
             <li class="user-text">|</li>
             <li class="user-text" @click=""><img src=""
                                                        alt=""> 退出
             </li>
           </ul>
         </el-col>
       </el-row>
     </el-col>
   </el-row>

</div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      addr: "",

      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],

    };

  },
  methods:{
    showAddr() {

    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .lf {
    float: left;
  }
  .rf {
    float: right;
  }

  .header-container {
    height: 150px;
    background: #009688;
    position: relative;
  }
  .logo-container {
    margin-top: 35px;
  }

  .title-text {
    color: white;
  }

  .logo-text {
    font-weight: bold;
    font-size: 18px;
  }

  .logo {
    padding-right: 25px;
  }
  .date {
    padding-left: 100px;
  }

  .logo-time {
    font-size: 12px;
    padding-right: 5px;
  }
  .user-container {
    width: 300px;
    display: flex;
    justify-content: space-around;
  }
  .user-text {
    font-size: 14px;
    color: #99d5cf;
    cursor: pointer;
  }

</style>
